import styled from "styled-components";
export const AppContainer = styled.div`
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 800px;
  overflow: hidden;
`
export const AppMain = styled.div`
  height: 85%;
  width: 75%;
  box-shadow: inset 0 0 20px -10px #000000;
  background: rgba(21, 21, 21, 0.36);

  //border: 0.05rem #000000 solid;
  border-radius: 1.5rem;

  overflow: hidden;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .leftSide {
    height: 100%;
    //border-right: 0.05rem black solid;
    flex: 1;
  }

  .rightSide {
    height: 100%;
    //border: 0.05rem black solid;
    flex: 5;
    display: flex;
    flex-direction: column;
    background: rgba(80, 80, 80, 0.6);

    .head {
      flex: 2;
      //border-bottom: 0.05rem black solid;
    }

    .body {
      flex: 19;
      overflow-y: scroll;

      ::-webkit-scrollbar {
        display: none;
      }
    }

    .foot {
      background: rgba(0, 0, 0, 0.3);
      //border-top: 0.05rem black solid;
      flex: 3;
    }
  }
`